<template>
  <nav aria-label="分页导航" class="pagination-container" v-if="pageable">
    <ul class="pagination pull-right">
      <li class="page-item" :class="{disabled: pageable.currentPage <= 1}">
        <a class="page-link" href="javascript:;" @click="goto(pageable.currentPage - 1)">上一页</a>
      </li>
      <li
        :key="index"
        class="page-item"
        v-for="(p, index) in pageable.pageCount"
        :class="{active: pageable.currentPage == p}"
      >
        <a class="page-link" href="javascript:;" @click="goto(p)">{{p}}</a>
      </li>
      <li class="page-item" :class="{disabled: pageable.currentPage >= pageable.pageCount}">
        <a class="page-link" href="javascript:;" @click="goto(pageable.currentPage + 1)">下一页</a>
      </li>
    </ul>
  </nav>
</template>
<script>
export default {
    name : 'Pagination',
    props : {
        pageable : Object
    },
    methods : {
        goto(page) {
            if(this.pageable && this.pageable.goto) 
                this.pageable.goto(page);
        }
    }
}
</script>
<style lang="scss">
.pagination-container > .pagination {
  height: 100%;
  margin-bottom: 0;
}

.pull-right {
  float: right;
}

.page-link {
  border: none;
}

.page-item.active > .page-link {
  background-color: #346cb0;
}

// .page-item.disabled > .page-link {
//   color: gray;
// }

.page-item > .page-link {
  color: rgb(0, 90, 158);
}
</style>


